<template>
  <el-row class="main" :gutter="20">
    <el-col :span="3">
      <el-input
        placeholder="零件编号"
        suffix-icon="el-icon-edit"
        v-model.number="signValue"
      >
      </el-input
    ></el-col>
    <el-col :span="3">
      <el-select v-model="partsValue" clearable placeholder="零件名称">
        <el-option
          v-for="(item, index) in partsList"
          :key="index"
          :value="item"
        >
        </el-option> </el-select
    ></el-col>
    <el-col :span="3">
      <el-select v-model="specificationValue" clearable placeholder="零件规格">
        <el-option
          v-for="(item, index) in specificationList"
          :key="index"
          :value="item"
          @change="specificationValue = item"
        >
        </el-option> </el-select
    ></el-col>
    <el-col :span="6" style="display: flex; align-items: center">
      <el-input
        v-model.number="minPrice"
        placeholder="自定义最低单价"
        style="margin-right: 5px"
        ref="min"
      ></el-input>
      ~
      <el-input
        v-model.number="maxPrice"
        placeholder="自定义最高单价"
        style="margin-left: 5px"
        ref="max"
      ></el-input>
    </el-col>
    <el-col :span="5">
      <el-date-picker
        v-model="date"
        type="date"
        placeholder="入库日期"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
    </el-col>
    <el-col :span="4" class="btn">
      <el-button type="primary" icon="el-icon-s-operation" @click="search"
        >筛选</el-button
      >
      <el-button type="success" icon="el-icon-circle-plus-outline" @click="add"
        >新增</el-button
      >
    </el-col>
    <part-dialog
      :fun="fun"
      v-if="dialogVisible"
      @close="dialogClose"
    ></part-dialog>
  </el-row>
</template>

<script>
let partApi = require("@/api/part");
import PartDialog from "@/components/part_dialog";

export default {
  data() {
    return {
      signValue: "", //零件编号
      partsList: [], //零件名称列表
      partsValue: "",
      specificationList: [], //规格列表
      specificationValue: "",
      minPrice: "", //最低单价
      maxPrice: "", //最高单价
      date: "", //入库日期
      dialogVisible: false,
      fun: "add",
    };
  },
  methods: {
    /* 根据条件筛选 */
    async search() {
      let min = this.minPrice;
      let max = this.maxPrice;
      if (min && !max) {
        this.$notify.error({
          title: "填写有误",
          message: "请填写自定义最高单价",
        });
        this.$refs.max.focus();
        return;
      }
      if (!min && max) {
        this.$notify.error({
          title: "填写有误",
          message: "请填写自定义最低单价",
        });
        this.$refs.min.focus();
        return;
      }
      if (min && max && min >= max) {
        this.$notify.error({
          title: "填写有误",
          message: "最低单价不得大于或等于最高单价",
        });
        this.$refs.max.focus();
        return;
      }
      /* 筛选的数据 */
      let obj = {
        time: this.date || null,
        maxPrice: this.maxPrice || null,
        minPrice: this.minPrice || null,
        name: this.partsValue || null,
        signId: this.signValue || null,
        specification: this.specificationValue || null,
      };
      /* 将筛选条件传给父元素 */
      this.$emit("choosingData", obj);
      return;
    },
    /* 获取零件名称列表 */
    async getName() {
      let res = await partApi.getPartsName();
      this.partsList = res.list;
    },
    /* 获取规格列表 */
    async getSpecification() {
      let res = await partApi.getSpecification();
      this.specificationList = res.list;
    },
    /* 新增零件（打开对话框） */
    add() {
      this.dialogVisible = true;
    },
    /* 对话款已关闭 */
    dialogClose(val) {
      this.dialogVisible = val;
    },
  },
  created() {
    this.getName();
    this.getSpecification();
  },
  components: {
    PartDialog,
  },
};
</script>

<style scoped>
.main {
  margin-bottom: 15px;
}
/* 按钮领域 */
.btn {
  display: flex;
  align-items: center;
}
</style>